<%--
  User: Shengzhao Li
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head><title>账务图表 - 按收支</title></head>
<body>
<div id="account_chart_daily_page" data-role="page" class="page">
    <div data-role="header" data-theme="f">
        <a href="${contextPath}/m/dashboard" data-icon="home" data-direction="reverse" data-transition="slide">主页</a>

        <h1>账务图表 - 按收支</h1>
        <a href="javascript:void(0);" data-icon="arrow-l" data-direction="reverse" data-rel="back">返回</a>
    </div>
    <div data-role="content">
        <div class="chart-context">
            <canvas id="paymentChart"></canvas>
        </div>
        <div style="margin-top: 5px;font-size: 10px;">
            图例:&nbsp;&nbsp;
            <span style="color:#F38630;">&Delta;</span>收入
            &nbsp;
            <span style="color:#69D2E7;">&Delta;</span>支出
            &nbsp;
        </div>
    </div>

    <script src="${contextPath}/js/jquery/Chart/Chart.min.js"></script>
    <script>
        var chartHeight = document.body.clientHeight - 130;
        if (chartHeight < 50) {
            chartHeight = 50;
        }
        var chartWidth = document.body.clientWidth - 30;
        if (chartWidth < 50) {
            chartWidth = 50;
        }
        var length = (chartHeight > chartWidth ? chartWidth : chartHeight);
        $("#paymentChart").attr("height", length)
                .attr("width", length);

        var data = [
            {
                value: ${paymentsStatisticsDto.income.amount},
                color:"#F38630"
            },
            {
                value: ${paymentsStatisticsDto.expenditure.amount},
                color:"#69D2E7"
            }
        ];

        var context = $("#paymentChart").get(0).getContext("2d");
        var myLine = new Chart(context).Pie(data);
    </script>
</div>
</body>
</html>